<template>
  <div id="ground">
    <div>
      {{nowtime}}
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        nowtime: ""
      }
    },
    created() {
      this.NowTimes()
    },
    methods: {
      myTime() {
        const time = new Date();
        this.hh = time.getHours();
        this.mm = time.getMinutes();
        this.ss = time.getSeconds();
        this.nowtime = Math.floor(this.hh / 10) + (this.hh % 10 + ':') + Math.floor(this.mm / 10) + this.mm % 10 + ':' +
          Math
          .floor(this.ss / 10) + this.ss % 10;
      },
      NowTimes() {
        this.myTime();
        setInterval(this.myTime, 1000);
        this.clear();
      },
      clear() {
        clearInterval(this.NowTimes);
        this.NowTimes = null;
      }
    },
    beforeDestroy() {
      this.clear();
    }
  }
</script>

<style scoped>
  #ground {
    background: radial-gradient(#0A2E38, #000 70%);
    background-color: #0a2e38;
    height: 100vh;
    overflow: hidden;
    user-select: none;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  div {
    color: #fff;
    font-size: 100px;
    font-family: 'Share Tech Mono';
    text-shadow: 0 0 20px #0AAFE6, 0 2px 0 #DAF6FF;
  }
</style>
